<template>
  <div id="evaluationResult-box">
    <nav-title title="测评结果" :routerLink="routerLink"/>
    <div class="dividingLine"/>
    <div class="regulations-box">
      <div class="info-cell">
        <div class="label">测评类型</div>
        <div class="value">
          <group>
            <popup-radio placeholder="请选择" :options="evaTypeList" v-model="evaType" @on-change="typeChange" />
          </group>
        </div>
      </div>
      <div class="info-cell">
        <div class="label">测评表</div>
        <div class="value">
          <!-- <group>
            <popup-radio placeholder="请选择" :options="tableList" v-model="tableName" @on-change="tableNameChange"/>
          </group> -->
          <Search placeholder="搜索测评表" @on-cancel="searchCancel" @on-clear="searchClear" @on-focus="getTableList(true)" v-model="sheetName" :results="sheetList" @on-change="searchChange" @on-result-click="searchResultChange"/>
        </div>
      </div>
    </div>
    <div v-if="allInfo.totalScore && loadingEnd">
      <div class="dividingLine"/>
      <div class="regulations-box score-box">
        <div class="info-cell">
          <div class="label">
            <p>总得分</p>
            <div>{{allInfo.totalScore}}</div>
          </div>
          <div class="value">
            <div>
              <ul>
                <li>&nbsp;</li>
                <li>他评</li>
                <li>自评</li>
              </ul>
              <ul>
                <li>得分</li>
                <li>{{allInfo.otherScore}}</li>
                <li>{{allInfo.selfScore}}</li>
              </ul>
            </div>
            <p v-if="allInfo.evaType == 'C'"><span>注：</span>他评：带教人；自评：新员工</p>
          </div>
        </div>
      </div>
      <div class="dividingLine"/>
      <div class="regulations-box analysis-box">
        <ul>
          <li :class="!active ? 'active' : ''" @click="active = 0">整体测评分析</li>
          <li :class="active ? 'active' : ''" @click="active = 1">全面测评分析</li>
        </ul>
        <div :style="'visibility:'+ (!active ? 'visible;':'hidden;')">
            <div>
              <ve-line :data="lineChartData" :settings="LineChartSettings" :colors="['#5b9bd5', '#ed7d31']" :extend="chartExtend"/>
            </div>
            <table>
              <thead>
                <tr>
                  <th>测评维度</th>
                  <th>他评</th>
                  <th>自评</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in allInfo.wholeResult">
                  <td>{{item.item}}</td>
                  <td>{{item.otherScore}}</td>
                  <td>{{item.selfScore}}</td>
                </tr>
              </tbody>
            </table>
        </div>
        <div :style="'visibility:'+ (active ? 'visible;':'hidden;')">
          <div>
            <ve-bar :data="barChartData" :settings="BarChartSettings" :colors="['#5b9bd5', '#ed7d31']" :extend="barExtend"/>
          </div>
          <table>
            <thead>
              <tr>
                <th>测评项</th>
                <th>他评</th>
                <th>自评</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in allInfo.detailResult">
                <td>{{item.item}}</td>
                <td>{{item.otherScore}}</td>
                <td>{{item.selfScore}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="noData" v-else-if="loadingEnd">
      <img src="../subordinates/image/no-subordinates.png" alt="">
      <p>您在该测评类型下没有可查看的测评结果！</p>
    </div>
  </div>
</template>

<script>
import { getDicItem, getSheetList, getEvaluationResult } from "../../api/api";
import VeBar from "v-charts/lib/bar.common";
import VeLine from "v-charts/lib/line.common";
import { Group, PopupRadio, Search } from "vux";
import { publicUrl } from "../../util/http";
export default {
  name: "EvaluationResult",
  components: {
    Group,
    PopupRadio,
    Search,
    VeBar,
    VeLine
  },
  created() {
    this.emplid = this.$route.query.emplid;
    this.getDvaluateType();
  },
  mounted() {},
  data() {
    this.BarChartSettings = {
      metrics: ["selfScore", "otherScore"],
      dataOrder: {
        label: "otherScore",
        order: "desc"
      },
      labelMap: {
        selfScore: "自评",
        otherScore: "他评"
      }
    };
    this.LineChartSettings = {
      labelMap: {
        selfScore: "自评",
        otherScore: "他评"
      }
    };
    this.barExtend = {
      // series: {
      //   label: { show: true, position: "right" }
      // }
      "series.1.label.position": "right",
      "series.1.label.show": "true"
    };
    this.chartExtend = {
      "xAxis.0.axisLabel.rotate": 60,
      series: {
        smooth: false,
        label: {
          normal: {
            show: true
          }
        }
      }
    };
    return {
      allInfo: {},
      loadingEnd: false,
      routerLink: "",
      emplid: "",
      evaTypeList: [],
      evaType: "",
      sheetList: [],
      sheetName: "",
      sheetId: "",
      active: 0,
      lineChartData: {
        columns: ["item", "selfScore", "otherScore"],
        rows: []
      },
      barChartData: {
        columns: ["item", "selfScore", "otherScore"],
        rows: []
      },
      firstCreate: true
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      const params = {
        emplid: this.emplid,
        evaType: this.evaType,
        sheetId: this.sheetId
      };
      getEvaluationResult(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
            this.lineChartData.rows = res.retData.wholeResult;
            this.barChartData.rows = res.retData.detailResult;
            this.loadingEnd = true;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getDvaluateType() {
      getDicItem({ fileName: "C_EVALUATE_TYPE" })
        .then(res => {
          if (
            res &&
            res.retCode === "000000" &&
            res.retData &&
            res.retData.length
          ) {
            const arr = [];
            res.retData.map(item => {
              const obj = {
                value: item.xlatshortname,
                key: item.fieldvalue
              };
              arr.push(obj);
            });
            this.evaTypeList = arr;
            this.evaType = arr[0].key;
            this.getTableList();
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getTableList(status) {
      const params = {
        emplid: this.emplid,
        evaType: this.evaType,
        querykey: this.querykey
      };
      getSheetList(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            if (res.retData.length == 0) {
              return;
              // return this.$vux.alert.show({
              //   title: "提示",
              //   content: "暂无测评表数据！",
              // onHide: ()=> {
              //   this.$router.go(-1);
              // }
              // });
            }
            const arr = [];
            res.retData.map(item => {
              const obj = {
                title: item.sheetDesc,
                key: item.sheetId
              };
              arr.push(obj);
            });
            this.sheetList = arr;
            if (this.firstCreate) {
              this.sheetName = arr[0].title;
              this.sheetId = arr[0].key;
              this.firstCreate = false;
            }
            if (status) {
              return;
            }
            this.getData();
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    typeChange() {
      // console.debug(this.evaType);
      this.allInfo = {};
      this.lineChartData.rows = [];
      this.barChartData.rows = [];
      this.sheetName = "";
      this.sheetId = "";
      this.sheetList = [];
    },
    searchChange(value) {
      if (value) {
        this.querykey = value;
        this.getTableList(true);
      } else {
        this.allInfo = {};
        this.lineChartData.rows = [];
        this.barChartData.rows = [];
        this.sheetName = "";
        this.sheetId = "";
        this.sheetList = [];
        this.getTableList(true);
      }
      // console.debug(value);
    },
    searchResultChange(item) {
      // console.debug(item);
      this.sheetName = item.title;
      this.sheetId = item.key;
      this.getData();
    },
    searchCancel() {
      // this.sheetName = "";
      // this.sheetList = [];
    },
    searchClear() {
      this.sheetName = "";
      this.sheetList = [];
    }
  }
};
</script>

<style type="text/scss" lang="scss">
#evaluationResult-box {
  .dividingLine {
    width: 100%;
    height: 4px;
    background-color: #eee;
  }
  .regulations-box {
    .info-cell {
      padding-right: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      line-height: 32px;
      .label {
        text-align: right;
        flex: 1;
        line-height: 60px;
      }
      .value {
        flex: 3;
        .weui-cell__ft {
          width: 100%;
          text-align: left;
          border: 1px solid #ddd;
          border-radius: 5px;
          padding-left: 5px;
          line-height: 37px;
          background: url("../payroll/images/u3664.png") right 9px no-repeat;
          background-size: 24px;
        }
        .weui-cell_access .weui-cell__ft:after {
          content: none;
        }
        .vux-search-box {
          padding-top: 4px;
          .weui-cells.vux-search_show {
            height: 100%;
          }
          .weui-search-bar {
            padding: 10px 15px;
            &::before,
            &::after {
              content: none;
            }
            background-color: #fff;
            form {
              &::after {
                border: 2px solid #ccc;
              }
            }
            .weui-search-bar__cancel-btn {
              display: none;
            }
            .weui-search-bar__form{
              line-height: 36px;
            }
            .weui-search-bar__box{
              .weui-icon-search{
                line-height: 36px;
              }
              .weui-icon-clear{
                line-height: 36px;
              }
            }
          }
        }
        .vux-search-box.vux-search-fixed {
          .weui-search-bar {
            .weui-search-bar__cancel-btn {
              display: block;
            }
          }
        }
      }
    }
    &.score-box {
      > .info-cell {
        padding: 10px 0;
        .label {
          font-size: 16px;
          flex: 1;
          text-align: center;
          p {
            color: rgb(153, 153, 153);
            line-height: 1.6;
          }
          div {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            text-align: center;
            line-height: 42px;
            background-color: #ccc;
            color: #f00;
            font-weight: bold;
            margin: 0 auto;
          }
        }
        .value {
          flex: 2;
          padding: 10px 10px 10px 0;
          div {
            box-sizing: border-box;
            ul {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              height: 24px;
              &:first-child {
                li {
                  background-color: #f0f0f0;
                  border-top: 1px solid #ccc;
                }
              }
              li {
                box-sizing: border-box;
                float: left;
                width: 33%;
                line-height: 24px;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ccc;
                &:last-child {
                  border-right: 1px solid #ccc;
                }
              }
            }
          }
          p {
            span {
              color: #f00;
            }
          }
        }
      }
    }
    &.analysis-box {
      padding-top: 10px;
      position: relative;
      > ul {
        margin: 0;
        padding: 0;
        height: 32px;
        border-bottom: 1px solid #ccc;
        li {
          line-height: 32px;
          float: left;
          padding: 0 10px;
          &.active {
            border-bottom: 2px solid #00f;
          }
        }
      }
      > div {
        padding: 10px;
        position: absolute;
        width: 100%;
        table {
          width: 100%;
          thead tr th,
          tbody tr td {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            padding: 4px 0;
          }
          thead tr th {
            background-color: #f0f0f0;
          }
          border-bottom: 1px solid #ccc;
          border-right: 1px solid #ccc;
        }
      }
    }
  }
  .noData {
    line-height: 3;
    font-weight: bold;
    padding-top: 30px;
    color: #888;
    p{
      padding: 20px 0;
    }
  }
}
</style>
